<template>
    <custom-page-box>
        <div class="success-case-container-update">
            <div class="top">
                <p>新增版本</p>
                <span>本版本更新仅对安卓设备有用。 IOS不支持应用内部更新</span>
            </div>
            <div class="content">
                <a-form-model
                    ref="ruleForm"
                    :model="form"
                    :rules="rules"
                    :label-col="{ span: 2 }"
                    :wrapper-col="{ span: 16 }"
                >
                    <div class="info-pag">
                        <a-form-model-item label="版本号" prop="versionNum">
                            <a-input v-model="form.versionNum" placeholder="请填写版本号，必须大于上一版本号" />
                        </a-form-model-item>
                        <a-form-model-item label="更新说明" prop="description">
                            <a-textarea
                                placeholder="更新说明"
                                allow-clear
                                :maxLength="500"
                                v-model="form.description"
                                :rows="4"
                            />
                            <span class="length-tips">{{ form.description.length }}/500</span>
                        </a-form-model-item>
                        <a-form-model-item label="更新用户" prop="name">
                            <a-radio-group name="radioGroup" :default-value="1">
                                <a-radio :value="1">全部用户</a-radio>
                            </a-radio-group>
                        </a-form-model-item>
                        <a-form-model-item label="更新类型" prop="name">
                            <a-radio-group v-model="form.type">
                                <a-radio :value="1">可选更新</a-radio>
                                <a-radio :value="2">强制更新</a-radio>
                            </a-radio-group>
                        </a-form-model-item>

                        <a-form-model-item label="上传安装包" prop="url">
                            <custom-upload-file btnText="点击上传" path="release/file/" v-model="form.url">
                            </custom-upload-file>
                        </a-form-model-item>
                    </div>
                    <a-form-model-item>
                        <a-button @click="back" class="mr20"> 取消 </a-button>
                        <a-button type="primary" @click="onSubmit"> 保存更新 </a-button>
                    </a-form-model-item>
                </a-form-model>
            </div>
        </div>
    </custom-page-box>
</template>

<script>
export default {
    name: 'VersionUpdate',
    data () {
        return {
            form: {
                description: '',
                type: 1,
                url: [],
                versionNum: '',
                scope: ''
            },
            rules: {
                versionNum: [
                    {
                        required: true,
                        message: '请填写版本号',
                        trigger: ['blur', 'change']
                    }
                ],
                description: [
                    {
                        required: true,
                        message: '请填写更新说明',
                        trigger: ['blur', 'change']
                    }
                ],
                url: [
                    {
                        required: true,
                        message: '请上传文件',
                        trigger: ['change']
                    }
                ]
            }
        }
    },
    created () {},
    methods: {
        onSubmit () {
            this.$refs.ruleForm.validate(async (valid) => {
                if (valid) {
                    const form = this.form

                    const res = await this.$ApiServer['version/add']({
                        description: form.description.trim(),
                        type: form.type,
                        url: form.url[0],
                        versionNum: form.versionNum.trim()
                        // scope: form.scope
                    })
                    if (res.code === 200) {
                        this.$message.success(res.message)
                        this.$router.push('/version')
                    } else {
                        this.$message.error(res.message)
                    }
                }
            })
        },
        back () {
            this.$router.push('/version')
        }
    }
}
</script>

<style scoped lang="less">
.success-case-container-update {
    .top {
        margin: -10px -10px 10px;
        height: 50px;
        background: #ddf7e9;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        padding-left: 20px;
        padding-right: 20px;
        p {
            font-size: 16px;
            font-weight: bold;
            color: @primary-color;
            margin-right: 4px;
        }
        span {
            font-size: 12px;
            font-weight: 400;
            color: @primary-color;
        }
    }
    .content {
        .ant-form {
            height: calc(100vh - 60px - 60px - 10px);
            background: #fff;
            border-radius: 6px;
            & > .ant-row:last-child {
                padding-left: 135px;
            }
        }
        .info-pag,
        .description-pag {
            border-radius: 4px;
            padding-bottom: 20px;
            margin-bottom: 10px;
            padding-top: 10px;
            position: relative;
        }
        .amount-input {
            width: 300px;
        }
        ::v-deep {
            .ant-form-item-label {
                width: 135px;
            }
            .ant-form-item-control-wrapper {
                width: 300px;
            }
            .length-tips {
                position: absolute;
                bottom: 8px;
                right: 4px;
                font-size: 10px;
                line-height: 10px;
            }
        }
    }
}

.mr20 {
    margin-right: 20px;
}
</style>
